<template>
	<om-page :title="pageTitle">
		<scroll-view v-if="commonMenuList.length" :scroll-y="true" :scroll-into-view="scrollViewId" :style="getHeightStyler" class="scroll-Y">
			<uni-card style="border: none;border-radius: 1px;" :titleUnderline="false" :is-full="true" :title="'已选(' + commonMenuList.length+')'">
				<om-menu
					ref="commonMenu"
					idPrefix="common-"
					class="padding-top-sm"
					@clickBadge="clickDeleteBadge"
					:menuList="commonMenuList"
					:colLen="5"
					:bordered="false"
					fontSize="small"
				></om-menu>
			</uni-card>
		</scroll-view>
		<scroll-view v-else :scroll-y="true" style="height: 20px;" class="scroll-Y">
			<view class="bg-brown text-sm flex justify-center align-center" style="height: 20px;">您现在没有配置工作场景菜单哦</view>
		</scroll-view>
		<view :style="getHeightStyler"></view>
		<view style="margin-bottom: 50px;">
			<view v-for="(item, index) in wxMenuList" :key="index">
				<view v-if="item.menu && item.menu.length">
					<uni-card style="border: none;border-radius: 1px;" :titleUnderline="false" :is-full="true" :title="item.groupName">
						<om-menu :menuList="item.menu" :colLen="5" :bordered="false" fontSize="small" :group="index" @clickBadge="clickAddBadge"></om-menu>
					</uni-card>
					<view style="height: 1px" class="bg-gray"></view>
				</view>
			</view>
		</view>
		<!-- <uni-swiper-dot :info="info" :current="current">
			<swiper class="swiper-box bg-blue" @change="change">
			        <swiper-item v-for="(item ,index) in info" :key="index">
			            <view>
			                {{item}}
			            </view>
			        </swiper-item>
			    </swiper>
		</uni-swiper-dot> -->
		<view class="om-bottom">
			<button style="background-color: #19BE6B;width: 100%;color:#fff;" @click="save">
				<tui-icon color="#fff" :size="28" name="edit"></tui-icon>
				<text class="text-white">完成</text>
			</button>
		</view>
	</om-page>
</template>

<script>
export default {
	data() {
		return {
			// current:0,
			// info: [1, 2, 3, 4, 5],
			initList: [], //初始的常用工具Id数组
			wxMenuList: [],
			pageTitle: '',
			num: 0,
			scrollViewHeight: 20,
			commonMenuList: [],
			scrollViewId: ''
		};
	},
	computed: {
		getHeightStyler() {
			return `height:${this.scrollViewHeight}px;`;
		}
	},
	methods: {
		// change(e){
		// 	this.current = e.detail.current;
		// },
		calcHeight() {
			let _that = this;
			_that.$nextTick(function(){
				let a = parseInt(_that.commonMenuList.length / 4) + (_that.commonMenuList.length % 4 !== 0 ? 1 : 0);
				let width = 0;
				if (_that.$refs.commonMenu) {
					_that.$refs.commonMenu._getSize(w => {
						if (w == 0) {
							setTimeout(() => {
								_that.$refs.commonMenu._getSize(w2 => {
									if (w2 == 0) {
										width = 90;
									} else {
										width = w2;
									}
								});
							}, 500);
						} else {
							width = w;
						}
					});
					if (a > 3) {
						_that.scrollViewHeight = width * 3 + 54;
					} else {
						if (a > 0) {
							_that.scrollViewHeight = width * a + 54;
						} else {
							_that.scrollViewHeight = 20;
						}
					}
					_that.$nextTick(() => {
						_that.scrollViewId = 'common-' + (_that.commonMenuList.length - 1);
					});
				}else{
					_that.scrollViewHeight = 20;
				}
			})
		},
		clickAddBadge(e) {
			let group = this.wxMenuList[e.group];
			let objArr = group.menu.splice(e.index, 1);
			let obj = objArr[0];
			obj.badgeText = '-';
			obj.badgeType = 'error';
			this.commonMenuList.push(obj);
			this.calcHeight();
		},
		clickDeleteBadge(e) {
			let objArr = this.commonMenuList.splice(e.index, 1);
			let obj = objArr[0];
			obj.badgeText = '+';
			obj.badgeType = 'success';
			let group = this.wxMenuList[obj.group];
			group.menu = [obj, ...group.menu].sort((a, b) => {
				return a.index - b.index;
			});
			this.calcHeight();
		},
		loadMenu() {
			let _that = this;
			_that.om.request('wxSceneMenu/getAllMenuList').then(res => {
				if (res.succeed) {
					var commonMap = {};
					var otherArr = [];
					for (var i = 0; i < res.value.length; i++) {
						let group = res.value[i];
						let rArr = [];
						for (var j = 0; j < group.menu.length; j++) {
							let m = group.menu[j];
							m.h5url = '';
							m.url = '';
							m.group = i;
							m.index = j;
							if (~_that.initList.indexOf(m.id)) {
								m.badgeText = '-';
								m.badgeType = 'error';
								commonMap[m.id] = m;
							} else {
								m.badgeText = '+';
								m.badgeType = 'success';
								rArr.push(m);
							}
						}
						otherArr.push({
							groupName: group.groupName,
							menu: rArr
						});
					}
					if (_that.initList.length) {
						_that.commonMenuList = _that.initList.map(e => commonMap[e]);
						_that.calcHeight();
					}
					_that.wxMenuList = otherArr;
				}
			});
		},
		save() {
			let _that = this;
			_that.om
				.request(
					'wxSceneMenu/save',
					{
						menuIds: this.commonMenuList.map(a => a.id).join(',')
					},
					'post'
				)
				.then(res => {
					if (res.succeed) {
						uni.setStorage({
							key: 'scene-menu-reload',
							data: true
						});
						uni.navigateBack();
					}
				});
		}
	},
	onLoad(options) {
		this.pageTitle = '工作场景';
		let _that = this
		this.om.request("wxSceneMenu/getSelectMenuList").then(res=>{
			if(res.succeed){
				_that.initList = res.value
				_that.loadMenu();
			}
		})
		
	}
};
</script>

<style>
.scroll-Y {
	top: 0;
	position: fixed;
	z-index: 10;
	background-color: white;
	box-shadow: 0 1px 10px #929191; /*for Android*/
	-webkit-box-shadow: 0px 1px 10px #b3b2b2; /*for IOS*/
}
</style>
